<template>
  <view class="tool-wrap">
    <input class="ipt" type="text" v-model="expr" placeholder="输入表达式，如 (2+3)*4" placeholder-class="ph" />
    <button class="btn" @tap="evalExpr">计算</button>
    <text class="result">结果：{{ result }}</text>
    <view class="history" v-if="history.length">
      <text class="label">历史</text>
      <view v-for="(h, i) in history" :key="i" class="item">{{ h }}</view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'CalcScientific',
  data() { return { expr: '', result: '-', history: [] } },
  methods: {
    evalExpr() {
      try {
        // 演示：使用 Function 计算简单表达式（仅原型，不建议生产）
        // eslint-disable-next-line no-new-func
        const out = Function(`return (${this.expr})`)()
        this.result = String(out)
        this.history.unshift(`${this.expr} = ${this.result}`)
      } catch (e) { this.result = '表达式错误' }
    }
  }
}
</script>

<style>
.tool-wrap { display: grid; gap: 12rpx; }
.ipt { height: 64rpx; border-radius: 20rpx; padding: 0 20rpx; color: #e9ecff; background: rgba(255,255,255,.06); border: 2rpx solid rgba(255,255,255,.12); }
.ph { color: #a7b0d9; }
.btn { height: 60rpx; border-radius: 20rpx; border: 2rpx solid rgba(255,255,255,.12); background: rgba(255,255,255,.06); color: #e9ecff; font-size: 24rpx; }
.result { font-weight: 600; }
.history { margin-top: 8rpx; }
.label { color: #a7b0d9; }
.item { margin-top: 6rpx; }
</style>


